<template>
	<view class="info">
		<view class="info-header">
			<view class="info-avatar">
				<image src="../img/2.jpg" style="width: 100px; height: 100px; border-radius: 50%;" mode=""></image>
			</view>
			<view class="info-name">
				王斌
			</view>
		</view>
		<view class="info-content">
			<ul>
			  <li>
				<image src="../../static/info-icon/gerenxinxi.svg" mode=""></image>
				 <span>个人信息</span>
			  </li>
			  <li>
				 <image src="../../static/info-icon/anquanbaozhang.svg" mode=""></image>
				  <span>账号安全</span>
			  </li>
			  <li>
				  <image src="../../static/info-icon/shezhi.svg" mode=""></image>
				  <span>设置</span>
			  </li>
			  <li>
					<image src="../../static/info-icon/bangzhu.svg" mode=""></image>
			  		<span>帮助与反馈</span>
			  </li>
			  <li>
				  <image src="../../static/info-icon/guanyu.svg" mode=""></image>
				  <span>关于</span>
			  </li>
			  <li>
				  <image src="../../static/info-icon/tuichu.svg" mode=""></image>
				  <span>退出登录</span>
			  </li>
			</ul>
		</view>
	</view>
</template>

<script>
</script>

<style scoped>
	.info {
		height: 100%;
		width: 100%;
	}
	.info-header{
		margin-top: 10px;
		height: 30%rpx;
		display: flex;
		flex-direction: column;
		text-align: center;
		border-bottom: 15px solid #eee;
		padding-bottom: 10px;
	}
	ul,li{
		list-style: none;
	}
	ul {
		padding-left: 20px;
	}
	li {
		display: flex;
		flex-direction: row;
		line-height: 50px;
		border-bottom: 1px solid #eee;
	}
	ul li image {
		padding-top: 10px;
		width: 30px;
		height: 30px;
	}
	ul li span {
		font-size: 16px;
		color: #8b8b8b;
		margin-left: 15px;
	}
</style>
